<template>
	<div class="eachNum">
		<div class="numberBox">
			<div :style="{transform: 'translateY('+pos+'rem)',transition: 'all linear 0.5s'}">
				<div v-for="n in 10" :key="n" class="nums">{{n-1}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'eachNum',
		data() {
			return {
				pos: 0
			}
		},
		watch: {
			v: {
				handler(n, o = 0) {
					this.pos += (o - n) * 40
				},
				immediate: true
			}
		},
		props: {
			v: {
				type: Number,
				default: 0
			}
		}
	}
</script>
<style lang='scss'>
	.eachNum {
		.numberBox {
			height: 40rem;
			width: 25rem;
			box-shadow: 0px 0px 2px 2px rgba($color: #33b1eb, $alpha: 0.5);
			border-radius: 5rem;
			overflow: hidden;
		}

		.nums {
			line-height: 40rem;
			color: skyblue;
			font-weight: bold;
			height: 40rem;
			width: 25rem;
			margin: auto;
			border-radius: 5rem;
			font-family: DIN1451;
		}
	}
</style>
